<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue生命周期</title>
	</head>
	<body>
		<div id="app">
				 <!-- 生命周期函数的方法名必须固定
						生命周期函数是vue对象特有的函数,应该放在根目录下
						一共执行了四个生命周期方法
								第一类: VUE对象的创建
										beforecreate:对象创建前调用
										created:VUE对象已经创建完成之后调用
								第二类: VUE对象的挂载(渲染)
										beforeMount: el : "#app",VUE对象在找到@app标签之前先执行
										mount: 当挂载(渲染)完成,用户可以看到页面数据之后调用该函数
						用户修改阶段:
								第三类: beforeUpdate: 当用户修改数据 点击"回车" 之后调用该方法
											过渡:数据已经被修改
										  update: 数据已经被修改之后调用该方法
					     销毁阶段:销毁函数,VUE对象默认不会调用. 可以通过函数由用户调用
										beforeDestroy: 在销毁方法执行前
										destroyed:标志着VUE对象已经销毁.
				  -->
		  <div id="app">
					<h3 v-text="msg"></h3>
					<button @click="destroy">销毁</button>
			</div>
		</div>		
		<!--引入js函数类库  -->
				<script src="../js/vue.js"></script>
				<script>
					const app = new Vue({
						el : "#app",
						data : {
							msg: "vue生命周期"
						},
						methods:{
							
						},   
						//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
						beforeCreate(){
							console.log("beforeCreate")
						},
						//在实例创建完成后被立即调用
						created(){
							console.log("created")
						},
						//在挂载开始之前被调用：相关的 render 函数首次被调用。
						beforeMount(){
							console.log("beforeMount")
						},
						//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
						mounted(){
							console.log("mounted")	
						},
						//数据更新时调用，发生在虚拟 DOM 打补丁之前
						beforeUpdate(){
							console.log("beforeUpdate")
						},
						//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
						updated(){
							console.log("updated")
						},
						//实例销毁之前调用。在这一步，实例仍然完全可用
						beforeDestroy(){
							console.log("beforeDestroy")	
						},
						//实例销毁后调用。
						destroyed(){
							console.log("destroyed")
						},
						methods:{
							destroy(){
								this.$destroy()
							}
						}
					})
				</script>
</body>
</html>
